<template>
    <div class="citypage subpage ">
        <my-head :title="$route.query.name?'当前城市-'+$route.query.name:'选择城市'" >
            <van-icon name="revoke" class="hicon"  @click="gotoback" />
        </my-head>
        <div class="search">
             <van-search
                v-model="keyword"
                show-action
                placeholder="输入城市名或拼音"
                @search="onSearch"
                @cancel="onCancel"
            />
        </div>
        <div class="cbox" v-if="toggle">
            <div class="ctop">
                <div class="ctitle ">
                    GPS定位你所在城市
                </div>
                <div class="cul">
                    <div class="citem gps">
                        定位失败
                    </div>
                </div>
            </div>

            <div class="ctop">
                <div class="ctitle ">
                    热门城市
                </div>
                <div class="cul">
                    <div class="citem " v-for="(l,i) in hotcity" :key="i"  @click="chooseCity(l)">
                        {{l.name}}
                    </div>
                </div>
            </div>
            
            <div class="clist">
                <van-index-bar >
                    <div v-for="(l,i) in pylist" :key="i">
                        <van-index-anchor :index="l">{{l}}</van-index-anchor>
                        <van-cell 
                            :title="item.name" 
                            v-for="(item,index) in cityList.filter(val=>val.pinyin.indexOf(l.toLowerCase())==0)"  
                            :key="index"
                            @click="chooseCity(item)"
                        />
                    </div>
                </van-index-bar>
            </div>
        </div>
        
        <div class="sclist" v-else >
            <div v-if="list.length>0">
                <van-cell v-for="(l,i) in list" 
                    :title="l.name" 
                    :key="i"
                    @click="chooseCity(l)"
                />
            </div>
            <div class="empty" v-else>
                <van-empty 
                image=""
                description="没有找到匹配的城市" />
            </div>
        </div>
    </div>
</template>


<script>
export default {
    data(){
        return {
            keyword:'',
            list:[],
            toggle:true, // 开关 
            pylist:[
                "A",
                "B",
                "C",
                "D",
                "E",
                "F",
                "G",
                "H",
                "I",
                "J",
                "K",
                "L",
                "M",
                "N",
                "O",
                "P",
                "Q",
                "R",
                "S",
                "T",
                // "U",
                // "V",
                "W",
                "X",
                "Y",
                "Z",
            ]
        }
    },

    // 路由组件守卫 
    beforeRouteLeave(to,from,next){
        console.log('beforeRouteLeave')
        if(!this.city){
            next(false)
            this.$toast("请你先选择所在的城市")
            // this.$dialog.alert({
            //     title: '选择城市',
            //     message: '请你务必先选择城市',
            // }).then(() => {
            // // on close 
            //     next(false)
            // });
        }else{
            next()
        }
    },
    methods:{
        onSearch(value){
            console.log(value)
            console.log('123123')
            this.toggle = false;
            this.list = this.cityList.filter(item=>(item.name.indexOf(value)>-1 || item.pinyin.indexOf(value)>-1) )

        },
        onCancel(){
            console.log("onCancel")
            this.list = []
            this.toggle = true;
            this.keyword = ""
        },
        chooseCity(item){
            this.changeCity(item)
            this.$router.back()
        },
        async getCityList(){
            let res = await this.$ajax.getMZdata({},{
                'X-Host': 'mall.film-ticket.city.list'
            })
            this.changeCityList(res.data.cities)
        }
    },
    mounted(){

        // vuex 优化
        // 只有没有数据的情况下才会去请求数据 
        if(!this.cityList.length>0){
            this.getCityList()
        }
        
    }
}
</script>


<style lang="scss" scoped>
.citypage{
    .ctop{
        padding:15px;
    }
    .ctitle{
        font-size: 13px;
        color: #797d82;
        margin-bottom: 10px;
    }
    .cul{
        display: flex;
        flex-wrap: wrap;

        .citem{
            height: 30px;
            background-color: #f4f4f4;
            line-height: 30px;
            border-radius: 3px;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            margin: 10px 7.5px;
            font-size: 14px;
            color: #191a1b;
            text-align: center;
            padding:0 25px;
        }
       
    }
}
</style>